<div class="ui-tree-select-container">
  <lv-tree-select
    [lvTreeData]="treeData"
    lvShowFilter
    lvFilterKey="label"
    lvFilterMode="contains"
    lvTreeShowCheckbox
    lvTreeSelectionMode="multiple"
    [(ngModel)]="selection"
    lvTreeShowLine
    lvShowClear
    lvTreeCompareWith="value"
    lvPanelClass="check-all-demo"
    [lvKeepExpanded]="treeKeepExpanded"
    (lvFilterChange)="searchChange($event)"
  >
    <lv-treeselect-header>
      <div class="check-all-demo-btn-container">
        <lv-group lvGutter="8px">
          <button lv-button (click)="expandAll()">Expand All</button>
          <button lv-button (click)="collapseAll()">Collapse All</button>
        </lv-group>
      </div>

      <div class="lv-option lv-select-panel-origin lv-option-multiple" (click)="toggleCheckAll()">
        <label lv-checkbox [ngModel]="isAllCheck" class="lv-option-checkbox" [lvIndeterminate]="isHalfCheck" lvControl></label>
        <div class="lv-option-container">
          <span class="lv-subselect-trigger">{{ 'all' | i18n }}</span>
        </div>
      </div>
    </lv-treeselect-header>
  </lv-tree-select>
</div>
